<template>
  <NowLoading v-if="firstLoading"/>
  <div v-else class="article-detail">
    <van-nav-bar title="文章详情" left-arrow @click-left="$router.back()" />
    <div class="article-content">
      <p class="title" >
        {{ articleData?.title }}
      </p>
      <FollowView :nickname="articleData?.nickname" :create_time="articleData?.create_time" :dev_type="''" :icon="articleData?.icon" :mid="articleData?.mid" :id="articleData?.id" :cont="articleData"/>
      <div class="article-text">
        <div v-html="articleData?.article_h5"></div>
      </div>

      <div class="discuss">
        <div class="comment-num">共<span v-if="!articleData?.comment_num">0</span>{{
          articleData?.comment_num }}条评论</div>
        <div class="self">
          <div class="self-img">
            <van-image v-if="articleData.cur_user_info" width="2rem" height="2rem"
              :src="articleData.cur_user_info.avatar" />
          </div>
          <van-field class="now-discuss" placeholder="来说点什么..." />
        </div>

      </div>

      <!-- <div class="answer-list-content">
    <div class="answer-list-item" v-for="item in anList" :key="item.answer_id">
 <div class="answer-img">
  <van-image
  round
  width="1.75rem"
  height="1.75rem"
  :src="item.avatar"
/>
 </div>

<div class="answer-right">
  <div class="answer">
    <div>
    <span  class="nickname">{{ item.nickname }}</span>
    <span>{{ item.create_time }}</span>
  </div>
    <div >
      <span class="support-num">{{ item.support_num }}</span>
      <van-icon name="good-job-o" size="1.1rem"/>
    </div>
</div>
  <p class="answer-content">{{ item.answer_content }}</p>
  
   <div class="secondary-data" v-if="item.secondary_data.answer_list.length">
    <div class="secondary-data-item" v-for="i in item.secondary_data.answer_list" :key="i.answer_id">
<p>
  <span class="se-nickname">{{  i.nickname}}:</span><span class="se-answer-content">{{ i.answer_content }}</span>
</p>
    <p class="se-belong-place" v-if="i.belong_place">{{ i.belong_place }}</p>
    </div>
   </div>
</div>
    </div>
  </div> -->
    </div>


  </div>
</template>
<script setup lang="ts">
import FollowView from '../../../../components/FollowView.vue'
import NowLoading from '../../../../components/NowLoading.vue'
import { onMounted, ref, onBeforeUnmount,nextTick } from 'vue'
import { getArticleDetail ,getContentCommentList} from '../../../../api/find'
import { type ArticleData,contentComment } from '../../../../typings';
import { useRoute } from 'vue-router';
const route = useRoute();
const r = ref<number>();
r.value = Number(route.query.id);
const page = ref(1);
const articleData = ref<ArticleData>();
const loading = ref(false);
const firstLoading = ref(true);
const finished = ref(false); 
const comment = ref<Array<contentComment>>([]);
onMounted(() => {
  getData(r.value);
  getComment(r.value,page.value);
  getLoading();
}
)
const getData = async (id: number) => {
  let res = await getArticleDetail(id);
  articleData.value = res.data;
}
const getComment = async (id:number,p:number) => {
    let rescom = await getContentCommentList(id,p);
  // comment.value = [...comment.value, ...rescom.data.comment_list];
    console.log("评论数据=》",rescom);
    
}

const getLoading = () => {
  setTimeout(() => {
    firstLoading.value = false;
  }, 800);
}
const onLoad = () => {
  page.value += 1;
      setTimeout(() => {
     getComment(r.value,page.value);
     nextTick(() => {
       loading.value = false;
       page.value += 1;
        })
        if (comment.value.length >= 1000) {
          finished.value = true;
        }
      }, 1000);
};
onBeforeUnmount (()=>{
  getLoading();
  onLoad();
    }
)

</script>

<style lang="scss" scoped>
.article-detail {
  position: fixed;
  width: 100vw;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  overflow: scroll;
  z-index: 9999;

}
:deep(.van-nav-bar__title) {
  color: #666666;
  font-weight: normal;
}

:deep(.van-nav-bar__arrow) {
  color: #919191;
  font-size: 1.5rem;
}
.article-content {
  padding: 0rem 1rem;

  .title {
    font-size: 1.3rem;
    font-weight: bold;
  }

}


:deep(img) {
  width: 100%;
  border-radius: .6rem;
  vertical-align: middle;
}

.discuss {
  padding: 0rem 0rem 1rem;
  background-color: #fff;

  .comment-num {
    font-size: .8rem;
    color: #333;
    margin-bottom: .4rem;
  }

  .self {
    display: flex;

    .now-discuss {
      padding: .4rem;
      background-color: #f6f6f6;
      border-radius: 9999rem;
    }

    .self-img {
      margin-right: .6rem;
    }
  }
}
</style>